<template>
  <div class="mine">
    <!-- 顶部样式 -->
    <div class="topBackground">
      <div class="photo">
        <img :src="this.userFace" />
        <p>{{ this.realname }}</p>
      </div>
    </div>
    <!-- 头像以及余额 -->
    <div class="user">
      <div class="message">
        <div class="money">
          <p>余额</p>
          <p>{{this.balance }}</p>
        </div>
        <div class="pushmoney">
          <van-button type="primary" @click="show = true">充值</van-button>
        </div>
      </div>
    </div>
    <!-- 常用地址 -->
    <div class="address">
           <van-cell title="常用地址" icon="location-o" @click="todizhi()" is-link  />

      <van-cell title="联系我们" icon="location-o" is-link />
      
    </div>
    <div class="botn">
      <van-button round type="primary" size="large" @click="logout()"
        >退出登录</van-button
      >
    </div>
    <van-action-sheet v-model="show" title="充值">
      <div class="content1">
        <van-cell-group>
          <van-field
            v-model="number"
            required
            label="充值金额"
            placeholder="请输入充值金额"
            error-message="单次充值金额最大不超过1000元"
          />
          <van-button round type="primary" size="large" @click="chongzhi()"
        >提交</van-button>
        </van-cell-group>
      </div>
    </van-action-sheet>
  </div>
</template>


<script>

import { mapState } from "vuex";
import { AddressList, Popup, ActionSheet, Toast, Field } from "vant";
import { Notify } from "vant";
import { Dialog } from "vant";
import axios from "axios";
import { get, post } from "@/http/axios";
import { Card } from "vant";
import Vue from "vue";
import { Cell, CellGroup } from "vant";
export default {
  methods: {
    todizhi(){
       this.$router.push({
            path: "/manager/minepath",
          });
    },
    async chongzhi(number) {
      let data = {
        customerId:this.customerId,
        money:this.number, 
      }
      let res = await get("/account/recharge",data)
      Notify({ type: "success", message: res.data.message });
      // console.log(res);
       this.show=false,
      this.getmsg()
    },
    logout() {
      Dialog.confirm({
        message: "是否退出登录",
      })
        .then(async () => {
          // on confirm
          let res = await post("/user/logout");
          // console.log(res.data.message);

          Notify({ type: "success", message: res.data.message });
          this.$router.push({
            path: "/Logintest",
          });
        })
        .catch(() => {
          // on cancel
        });
    },
      async getmsg() {
      let res = await get("/user/info", { token: localStorage.getItem('token') });
      // console.log(res.data);
     
      this.realname = res.data.data.realname;
      this.userFace = res.data.data.userFace;
      this.balance = res.data.data.balance;
      this.customerId= res.data.data.id;
    },
  },
  computed:{
  },
  data() {
    return {
      facePhoto:'',
      username: "",
      password: "",
      realname: "",
      userFace: "",
      balance: "",
      show: false,
      number:"",
      customerId:"",
   
    }
  },
  created() {
    this.getmsg()  
  },
};
</script>

<style scoped>
.mine {
  height: 568px;
}
.topBackground {
  height: 240px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  text-align: center;
}
.user {
  margin-left: 7%;
  margin-top: -120px;
  background: #fff;
  width: 86%;
  height: 200px;
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
}
.photo {
  margin-top: -40px;
  text-align: center;
  position: relative;
  top: 85px;
  z-index: 9999;
}
.message {
  display: flex;
}
img {
  height: 95px;
  width: 95px;
  border-radius: 50%;
}
.money {
  flex-grow: 1;
  text-align: center;
  margin-top: 100px;
}
.pushmoney {
  flex-grow: 1;
  text-align: center;
  margin-top: 140px;
}
.van-button {
  border-radius: 999px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
}
.address{
  box-shadow: 4px 4px 4px 0 rgb(158 117 255 / 20%);
  margin-top: 50px;
  padding-top:10px;
  width: 90%;
  margin-left: 5%;
}
.botn {
  width: 60%;
  padding-left: 20%;
  margin-top: 110px;
}
</style>